<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->

    <div class="filter-container" style="display: flex">
      <el-form ref="editForm" :model="editForm" status-icon label-position="right"
               label-width="100px" style="display: flex">
        <el-form-item label="保险公司" prop="ID" style="width: 400px">
          <el-select v-model="editForm.ID" placeholder="请选择" style="width: 260px">
            <el-option
              v-for="item in bxagentfee"
              :key="item.companyName"
              :label="item.companyName"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始日期" prop="startDate">
          <el-date-picker
            v-model="editForm.startTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker
            v-model="editForm.endTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div style="margin-left: 30px">
        <el-button type="primary" @click="doQuery" icon="el-icon-search">查询</el-button>
      </div>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#92D3FF',color:'#fff'}">

      <el-table-column align="center" min-width="100" label="表单编号" prop="formNo"/>
      <el-table-column align="center" min-width="100" label="关联类型" prop="type">
        <template slot-scope="scope">
          <el-tag>{{{"0":"保代公司","1":"权益服务商"}[scope.row.type]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100" label="上传时间" prop="addTime"/>
      <el-table-column align="center" min-width="120" label="保险公司名称" prop="suranceName"/>
      <el-table-column align="center" min-width="120" label="保代公司名称" prop="agentName"/>
      <el-table-column align="center" min-width="120" label="保理公司名称" prop="factoringName"/>
      <!--<el-table-column align="center" min-width="120" label="保单总数" prop="billCount"/>-->
      <el-table-column align="center" min-width="120" label="手续费总额 (元)" prop="amount"/>
      <el-table-column align="center" min-width="150" label="表单状态" prop="status">
        <template slot-scope="scope">
          <el-tag>{{{
            "0":"表单已上传",
            "1":"权益服务商垫资已申请",
            "2":"保理公司已接收",
            "3":"保理公司垫资已支付",
            "4":"保险公司已回款",
            "5":"保代公司已确认",
            "6":"垫资利息已支付",
            "7":"权益服务商已取款"}[scope.row.status]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="140" label="保代公司处理时间" prop="advanceTime"/>
      <el-table-column align="center" min-width="140" label="需要垫资金额 (元)" prop="advanceAmount"/>
      <el-table-column align="center" min-width="120" label="垫资支付时间" prop="advanceTime"/>
      <el-table-column align="center" min-width="120" label="回款总额 (元)" prop="repayAmount"/>
      <el-table-column align="center" min-width="100" label="回款时间" prop="repayTime"/>
      <el-table-column fixed="right" align="center" label="操作" width="150" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="success" size="mini"
                     @click="handleBalance(scope.row)">明细查询
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="editForm.pageNum" :limit.sync="editForm.pageSize"
                @pagination="getList"/>
    <!-- 余额对话框 -->
    <el-dialog :visible.sync="acclistDialogVisible" title="明细查询" width="900px" :close-on-click-modal="false">
      <el-table v-loading="acclistLoading" :data="acclist" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#92D3FF',color:'#fff'}">
        <el-table-column fixed align="center" max-width="100" label="保单号/合同号" prop="billNo"/>
        <el-table-column align="center" min-width="100" label="保单金额 (元)" prop="billAmount"/>
        <el-table-column align="center" min-width="100" label="代理手续费 (元)" prop="fee"/>
        <el-table-column align="center" min-width="100" label="代理人身份证号" prop="agentID"/>
        <el-table-column align="center" min-width="100" label="代理人编码" prop="agentNo"/>
        <!--<el-table-column align="center" min-width="100" label="是否需要垫资" prop="isAdvance">
          <template slot-scope="scope">
            <el-tag>{{{"0":"待确认","1":"不需要","2":"需要"}[scope.row.isAdvance]}}</el-tag>
          </template>
        </el-table-column>-->
      </el-table>
      <!--明细对话框-->
    </el-dialog>
  </div>
</template>

<script>
    import {doGet, doPost} from '@/api'
    import {cities} from '@/utils/base'
    import {parseTime} from '@/utils'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
    import checkPermission from '@/utils/permission' // 权限判断函数

    export default {
        name: 'correlation',
        components: {Pagination},
        filters: { },
        data() {
            return {
                list: [],
                bxagentfee: [],
                total: 0,
                listLoading: true,
                dialogStatus: 'create',
                editForm: {
                    startTime: undefined,
                    endTime: undefined,
                    ID: undefined,
                    pageNum: 1,
                    pageSize: 20,
                    type: undefined
                },
                acclistDialogVisible: false, // 账户列表对话框显示标志
                acclistLoading: false, // 查看账户列表loading标志
                acclist: [], // 账户列表数据
                id: undefined,
                account: undefined, // 指定账户号
            }
        },
        created() {
            this.getList()
            this.getBxagentfee()
        },
        methods: {
            checkPermission,
            getBxagentfee() {
                doGet('insurance.html?op=list', {}).then(response => {
                    this.bxagentfee = response.rows
                }).catch(() => {
                    this.bxagentfee = []
                })
            },
            // 获取手续费列表
            getList() {
                this.listLoading = true
                doGet('statistics.html?op=getAllFeeList', this.editForm).then(response => {
                    this.list = response.rows
                    this.total = response.data.totalcount
                    this.listLoading = false
                }).catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
            },
            // 获取明细列表
            getAccList(row) {
                this.$refs['editForm'].validate(valid => {
                    if (valid) {
                        this.editForm.type = row.type
                        doGet(`${this.editForm.type === 0 ? 'bxagentfee' : 'bxservicefee'}.html?op=billlist`, { ...this.editForm, id: row.id })
                            .then(response => {
                                this.acclist = response.rows
                                this.acclistLoading = false
                            })
                            .catch(response => {
                                this.acclist = [];
                                this.total = 0;
                                this.listLoading = false
                            })
                    }
                })
            },
            // 弹出明细列表
            handleBalance(row) {
                this.acclist = []
                this.acclistDialogVisible = true
                this.getAccList(row)
            },
            // 查询余额
            doQuery() {
                this.getList()
            },
        }
    }
</script>
